<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="/js/vue.min.js"></script>
    <script src="/elementUI/index.js"></script>
    <link rel="stylesheet" href="/elementUI/index.css">
    <script src="/js/axios.min.js"></script>

</head>

<body>
    <div id="app">
        <el-row :gutter="20">
        <el-breadcrumb separator-class="el-icon-arrow-right" style="font-size: 30px" >
            <el-breadcrumb-item>产品管理</el-breadcrumb-item>
            <el-breadcrumb-item>产品列表</el-breadcrumb-item>
        </el-breadcrumb>

        </el-row>
        <br><br>
        <el-row :gutter="20">
        <el-table ref="multipleTable" :data="tableData" @selection-change="handleSelectionChange">
            <el-table-column type="selection" width="55">
            </el-table-column>
            <el-table-column prop="id" label="id">
            </el-table-column>
            <el-table-column prop="productNum" label="产品编号">
            </el-table-column>
            <el-table-column prop="productName" label="产品名称">
            </el-table-column>
            <el-table-column prop="cityName" label="出发城市">
            </el-table-column>
            <el-table-column prop="departureTimeStr" label="出发时间">
            </el-table-column>
            <el-table-column prop="productPrice" label="产品价格">
            </el-table-column>
            <el-table-column prop="productStatusStr" label="状态">
            </el-table-column>
            <el-table-column fixed="right" label="操作" width="150">
                <template slot-scope="scope">
            <el-button @click="handleClick(scope.row)" type="text"  icon="el-icon-view" title="查看详情"></el-button>
            <el-button  @click="handleEdit(scope.$index, scope.row)" type="text"  icon="el-icon-edit" title="修改产品信息"></el-button>
            <el-button  @click="handleDelete(scope.$index, scope.row)" type="text"  icon="el-icon-delete" title="删除产品"></el-button>

                </template>
            </el-table-column>
          </template>
        </el-table>
        <div class="block" style="width: 100vw;">
            <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage" :page-sizes="[5,10, 20, 30, 40]" :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper" :total="count" style="width: 100%;">
            </el-pagination>
        </div>
        </el-row>
        <div style="margin-top: 20px">
            <el-button @click="toggleSelection([tableData[1], tableData[2]])">切换第二、第三行的选中状态</el-button>
            <el-button @click="toggleSelection()">取消选择</el-button>
        </div>
        <el-dialog title="产品详情" :visible.sync="dialogFormVisible">
            <el-form :model="descFrom" label-position="left">
                <el-form-item label="ID">
                    <el-input v-model="descFrom.id" disabled></el-input>
                </el-form-item>
                <el-form-item label="产品编号">
                    <el-input v-model="descFrom.productNum" disabled></el-input>
                </el-form-item>
                <el-form-item label="产品名称">
                    <el-input v-model="descFrom.productName" disabled></el-input>
                </el-form-item>
                <el-form-item label="出发城市">
                    <el-input v-model="descFrom.cityName" disabled></el-input>
                </el-form-item>
                <el-form-item label="出发时间">
                    <el-input v-model="descFrom.departureTimeStr" disabled></el-input>
                </el-form-item>
                <el-form-item label="产品价格">
                    <el-input v-model="descFrom.productPrice" disabled></el-input>
                </el-form-item>

                <el-form-item label="产品状态">
                    <el-input v-model="descFrom.productStatusStr" disabled></el-input>
                </el-form-item>
                <el-form-item label="产品描述">
                    <el-input type="textarea" v-model="descFrom.productDesc" disabled></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible = false">取 消</el-button>
                <el-button type="primary" @click="dialogFormVisible = false">确 定</el-button>
            </div>
        </el-dialog>
    </div>
</body>
<script>
    var obj = {
        page: 1,
        limit: 5
    }
    var v1 = new Vue({
        el: "#app",
        data: {
            tableData: [],
            count: 100,
            currentPage: 1,
            pageSize: 5,
            multipleSelection: [],
            dialogFormVisible: false,
            descFrom:{
                id:1,
                productNum:"产品编号",
                productName:"产品名称",
                cityName:"出发城市",
                departureTimeStr:"出发时间",
                productPrice:"产品价格",
                productDesc:"产品描述",
                productStatusStr:"状态"
             }

        },
        methods: {
            // 切换分页调用方法
            handleSizeChange(val) {
                //获取切换后的分页数val 
                //切换分页后应该从第一页开始查询
                // 向后台发送请求获取新的数据
                this.currentPage = 1;
                this.pageSize = val;

                console.log({
                    "当前页码": this.currentPage,
                    "当前分页数": this.pageSize
                });
                obj.page=this.currentPage;
                obj.limit=this.pageSize;
                axios({
                    // 请求方式
                    method: 'get',
                    url: '/product/json',
                    // 传递参数 data使用流发送数据 params台servlet可以直接获取
                    params: obj,
                    //响应的数据格式 默认就是json 可以省略
                    responseType: 'json'
                }).then(response => {
                    // 请求成功
                    let res = response.data;
                    console.log(res);
                    v1.tableData=res.list;
                    v1.count=res.total;

                }).catch(error => {
                    // 请求失败，
                    console.log(error);
                    // 一般不用
                });
            },
            handleCurrentChange(val) {
                //获取跳转的页码val
                //获取当前分页数this.pageSize
                // 向后台发送请求获取新的数据
                this.currentPage = val;
                console.log({
                    "当前页码": this.currentPage,
                    "当前分页数": this.pageSize
                });
                obj.page=this.currentPage;
                obj.limit=this.pageSize;
                axios({
                    // 请求方式
                    method: 'get',
                    url: '/product/json',
                    // 传递参数 data使用流发送数据 params台servlet可以直接获取
                    params: obj,
                    //响应的数据格式 默认就是json 可以省略
                    responseType: 'json'
                }).then(response => {
                    // 请求成功
                    let res = response.data;
                    console.log(res);
                    v1.tableData=res.list;
                    v1.count=res.total;

                }).catch(error => {
                    // 请求失败，
                    console.log(error);
                    // 一般不用
                });
            },
            handleClick(row) {
                console.log(row);
                //修改数据为当前行
                v1.descFrom=row

                v1.dialogFormVisible=true;
            },
            toggleSelection(rows) {
                if (rows) {
                    rows.forEach(row => {
                        this.$refs.multipleTable.toggleRowSelection(row);
                    });
                } else {
                    this.$refs.multipleTable.clearSelection();
                }
            },
            handleSelectionChange(val) {
                this.multipleSelection = val;
            },
            handleEdit(index, row) {
                console.log(index, row);
            },
            handleDelete(index, row) {
                console.log(index, row);
            }
        }
    })

        //发送异步请求访问第一页数据
    axios({
        // 请求方式
        method: 'get',
        url: '/product/json',
        // 传递参数 data使用流发送数据 params台servlet可以直接获取
        params: obj,
        //响应的数据格式 默认就是json 可以省略
        responseType: 'json'
    }).then(response => {
        // 请求成功
        let res = response.data;
        console.log(res);
        v1.tableData=res.list;
        v1.count=res.total;

    }).catch(error => {
        // 请求失败，
        console.log(error);
        // 一般不用
    });
</script>

</html>